<!-- 商城 - 商品列表展示item组件 -->
<template>
	<view class="vk-mall-goods-list-item" @click="click">
		<view class="image"><image :src="item.goods_thumb" mode="aspectFill"></image></view>
		<view class="title">
			<text class="u-line-2">{{ item.name }}</text>
		</view>
		<view class="footer">
			<view class="price-info">
				<text class="price-icon">¥</text>
				<text class="price-text">{{ salePriceFn(item) }}</text>
			</view>
			<view class="cart" @click.stop="cart"><u-icon type="circle" size="42" name="vk-mall-icon-gouwuche"></u-icon></view>
		</view>
	</view>
</template>

<script>
export default {
	name: "vk-mall-goods-list-item",
	props: {
		// 商品数据源
		item: {
			Type: Object,
			default: function() {
				return {};
			}
		}
	},
	data: function() {
		// 组件创建时,进行数据初始化
		return {};
	},
	mounted() {
		this.init();
	},
	methods: {
		// 初始化
		init() {},
		cart(){
			let that = this;
			let { vk, item }= that;
			that.$emit("cart",item);
		},
		click(){
			let that = this;
			let { vk, item }= that;
			that.$emit("click",item);
		},
		// 销售价计算
		salePriceFn(goods){
			let that = this;
			let { vk } = that;
			let str = "";
			if (goods.sku_list && goods.sku_list.length > 0) {
				let min = Number.MAX_VALUE;
				let max = 0;
				goods.sku_list.map((item, index) => {
					if (item.price < min) {
						min = item.price;
					}
					if (item.price > max) {
						max = item.price;
					}
				});
				str = `${vk.pubfn.priceFilter(min)}`
			}
			return str;
		}

	},
	// 监听器
	watch: {},
	// 计算属性
	computed: {}
};
</script>

<style lang="scss" scoped>
.vk-mall-goods-list-item {
	border-radius: 20rpx;
	background-color: #ffffff;
	overflow: hidden;
	.image {
		text-align: center;
		image {
			width: 100%;
			height: 345rpx;
			display: block;
		}
	}
	.title {
		padding: 20rpx;
		font-size: 26rpx;
		line-height: 40rpx;
		height: 120rpx;
	}
	.footer {
		padding: 0 20rpx 20rpx 20rpx;
		display: flex;
		.price-info {
			flex: 1;
			color: var(--main);
			.price-icon {
				font-size: 24rpx;
			}
			.price-text {
				font-size: 32rpx;
			}
		}
	}
}
</style>
